<template>
	<view class="h-full flex flex-col w-full" style="overflow:hidden;align-items:stretch;background:#F6F7FB">
		<!-- <uv-navbar title="货源筛选" :autoBack="true" :placeholder="true" :border="true"></uv-navbar> -->
		<!-- <div style="height:50rpx"></div> -->
		<!-- <Title :title="title" /> -->
		<view style="height:100%;overflow: auto;">
			<view class="tabs_nav">
				<view class="item" :class="tabIndex == -1 ? 'hover' : ''" @click="clickTabs(-1)">
					<view class="name">
						{{$t('全部类型')}}
					</view>
				</view>
				<view class="item" :class="tabIndex == 0 ? 'hover' : ''" @click="clickTabs(0)">
					<view class="name">
						{{$t('大件物流')}}
					</view>
				</view>
				<view class="item" :class="tabIndex == 1 ? 'hover' : ''" @click="clickTabs(1)">
					<view class="name">
						{{$t('小件快递')}}
					</view>
				</view>
			</view>
			<!-- <pre>
				{{ filterList }}
			</pre> -->

			<u--form :model="filterList" :rules="rules" ref="serviceForm" class="ml-20 mr-20 formSty">
				<view class="contentBg">
					<!-- <p class="titleSty pt-34">{{$t('发布时间')}}</p> -->
					<view class="w-full bg-white rounded-26">

						<view class="cityBox pt-30">
							<view class="citySty py-10">
								<city is_all="true" :value="fullBeginAddressKey" class="w-full" @change="e => {
									fullBeginAddress = e.column2.value == -1 || e.column3.value == -1 ?
										[e.column1.label, e.column2.label.replace('全部', ''), e.column3.label.replace('全部', '')].filter(item => item).join(',') :
										e.column3.label;
									fullBeginAddressKey = [e.column1.value, e.column2.value, e.column3.value].join(',');
								}">
									<div class="h-full flex fz35 mt-15 ml-5 w-full"
										:class="{ 'font-bold': fullBeginAddress }"
										:style="{ color: fullBeginAddress ? '#333' : '#8c8c8c' }">
										{{ fullBeginAddress || $t('请选择') }}
									</div>
								</city>
							</view>
							<!-- @/static/icon/change.png -->
							<div class="center" @click="() => {
								let tempAddress = fullBeginAddress
								let tempAddressKey = fullBeginAddressKey
								fullBeginAddress = fullEndAddress
								fullBeginAddressKey = fullEndAddressKey
								fullEndAddress = tempAddress
								fullEndAddressKey = tempAddressKey
							}">
								<image src="./../../static/icon/change.png" mode=""></image>
							</div>
							<view class="citySty text-right" style="text-align: left;">
								<city is_all="true" :value="fullEndAddressKey" class="w-full" @change="e => {
									fullEndAddress = e.column2.value == -1 || e.column3.value == -1 ?
										[e.column1.label, e.column2.label.replace('全部', ''), e.column3.label.replace('全部', '')].filter(item => item).join(',') :
										e.column3.label;
									fullEndAddressKey = [e.column1.value, e.column2.value, e.column3.value].join(',');
								}">
									<div class="h-full  fz35 mt-15 w-full" :class="{ 'font-bold': fullEndAddress }"
										:style="{ color: fullEndAddress ? '#333' : '#8c8c8c' }"
										style="text-align: right">
										{{ fullEndAddress || $t('请选择') }}
									</div>
								</city>
							</view>
						</view>

						<div class="between mt-20 px-20 text-gray-3d3d3d">
							<div v-for="(item, index) in timeList" class="w-150 h-65 fz24 center bg-gray-300 rounded-50"
								:class="{ timeActive: filterList.start_time == item.start_time && filterList.end_time == item.end_time }"
								@click="filterList.start_time = item.start_time; filterList.end_time = item.end_time">
								{{ item.text }}
							</div>
						</div>
						<div class="h-25"></div>
					</view>

					<view class="h-200 bg-white mt-20 rounded-26">
						<p class="titleSty pt-20 pb-24 ml-30">{{$t('货物名称')}}</p>
						<u-form-item prop="keyword" ref="keyword">
							<u--input v-model="filterList.keyword" :placeholder="$t('请输入货物名称关键词')"
								class="businessSty"></u--input>
						</u-form-item>
					</view>

					<view v-if="tabIndex == 0" class="bg-white mt-20 rounded-26">

						<p class="titleSty pt-35 ml-25">{{$t('业务需求')}}</p>
						<u-form-item prop="demand" border ref="demand" class="advanBoxSty">
							<button v-for="(item, index) in advantageList"
								:class="{ common: item.checked == true || item.checked == false, checkedSty: item.checked == true }"
								@click="advanCheck(item, index)">
								{{ item.text }}
							</button>
						</u-form-item>
						<p class="titleSty mt-35 pb-24 ml-25">{{$t('运输方式')}}</p>
						<u-form-item prop="transport_way" ref="transport_way">
							<u-button class="badBtn" @click="showTran = true">
								<span class="text-333">{{ transportCheck }}</span>
								<image class="w-20 h-15" src="/static/icon/downArrow.png"></image>
							</u-button>
							<u-picker v-model="filterList.transport_way" :show="showTran" :columns="transportList"
								@cancel="showTran = false" @confirm="confirmTran"></u-picker>
							<!-- <u-picker :show="show" :columns="columns" @cancel= "show = false" @confirm="show = false"></u-picker> -->
						</u-form-item>
					</view>
					<view v-else-if="tabIndex == 1">
						<view class="bg-white mt-20 rounded-26">
							<p class="titleSty pt-20 pb-24 ml-30">{{$t('货物重量')}}(kg)</p>
							<view class="flex-start flex  ml-30 pb-24">

								<u-form-item prop="min_weight" ref="min_weight">
									<u--input v-model="filterList.min_weight" class="smallInputSty"
										placeholder="0.00"></u--input>
								</u-form-item>
								<div class="w-42 h-1 bg-888 ml-12"></div>
								<u-form-item prop="max_weight" ref="max_weight">
									<u--input v-model="filterList.max_weight" class="smallInputSty ml-12"
										placeholder="0.00"></u--input>
								</u-form-item>
							</view>
						</view>
						<view class="bg-white mt-20 rounded-26">
							<p class="titleSty pt-40 pb-24 ml-30">{{$t('货物体积')}}(m³)</p>
							<view class="flex-start flex  ml-30 pb-24">
								<u-form-item prop="min_volume" ref="min_volume">
									<u--input v-model="filterList.min_volume" class="smallInputSty"
										placeholder="0.00"></u--input>
								</u-form-item>
								<div class="w-42 h-1 bg-888 ml-12"></div>
								<u-form-item prop="max_volume" ref="max_volume">
									<u--input v-model="filterList.max_volume" class="smallInputSty ml-12"
										placeholder="0.00"></u--input>
								</u-form-item>
							</view>
						</view>

					</view>
				</view>
			</u--form>
			<view class="empty"></view>

		</view>

		<view class="footer_btn4">
			<view class="btn_blue flex-1" @click="filterInit"
				style="border:1px solid #ddd;color:#333;background: #fff;">
				{{$t('重置')}}
			</view>
			<div class="w-50"></div>
			<view class="btn_blue flex-1" @click="submit">
				{{$t('确认')}}
			</view>
		</view>


		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import regionsPicker from './components/regions.vue';
import {
	regionList
} from '@/utils/region.js'
import citySelect from "./components/citySelect.vue"
import Title from './components/title.vue'
import {
	getDeliverySelect
} from '@/api/order.js'

export default {
	components: {
		regionsPicker,
		Title,
		citySelect
	},
	props: ["modalIsShow"],
	data() {

		return {
			tabIndex: -1,
			showBeginTime: false,
			showEndTime: false,
			fullBeginAddress: '',
			fullBeginAddressKey: '',
			fullEndAddress: '',
			fullEndAddressKey: '',
			title: this.$t('货源筛选'),
			pubTimeIndex: 0,
			afterTime: '',
			beforeTime: '',
			businessData: [
				this.$t('不限'), this.$t('运输'), this.$t('报关'), this.$t('转关'), this.$t('清关'), this.$t('仓储'), this.$t('装卸')
			],
			showTran: false,
			transportList: [
				[this.$t('不限'), this.$t('其他'), this.$t('汽运'), this.$t('空运'), this.$t('海运'), this.$t('铁路')]
			],
			businessIndex: 0,
			startCity: '',
			endCity: '',
			isStarEnd: 0,
			loading: true,
			provinces: [], //省
			citys: [], //市
			areas: [], //区
			pickerValue: [0, 0, 0],
			defaultValue: [3442, 1, 2],
			badInfo: '',
			formData: {
				user_id: uni.getStorageSync('user_id'),
				area_id: "", //城市
				content: "", //详细地址
			},
			fullAddress: "",
			scoreList: [{
				num: "1.0",
				checked: false
			},
			{
				num: "2.0",
				checked: false
			},
			{
				num: "3.0",
				checked: false
			},
			{
				num: "4.0",
				checked: false
			},
			{
				num: "5.0",
				checked: false
			},
			],
			advantageList: [{
				text: this.$t('不限'),
				key: '0',
				checked: false
			},
			{
				text: this.$t('运输'),
				key: '1',
				checked: false
			},
			{
				text: this.$t('报关'),
				key: '2',
				checked: false
			},
			{
				text: this.$t('转关'),
				key: '3',
				checked: false
			},
			{
				text: this.$t('清关'),
				key: '4',
				checked: false
			},
			{
				text: this.$t('仓储'),
				key: '5',
				checked: false
			},
			{
				text: this.$t('装卸'),
				key: '6',
				checked: false
			}
			],
			timeList: [{
				text: this.$t('不限'),
				key: '0',
				checked: false,
				start_time: "",
				end_time: ""
			},
			{
				text: this.$t('今日'),
				key: '1',
				checked: false,
				start_time: this.getDate(0),
				end_time: "2025-02-21"
			},
			{
				text: this.$t('三日内'),
				key: '2',
				checked: false,
				start_time: this.getDate(3),
				end_time: this.getDate(0)
			},
			{
				text: this.$t('七日内'),
				key: '3',
				checked: false,
				start_time: this.getDate(7),
				end_time: this.getDate(0)
			}
			],
			show: false,
			fileList1: [],
			timeCheckd: '',
			columns: [
				[this.$t('货物损坏'), this.$t('运输过慢'), this.$t('包装劣质')]
			],
			beginTimeShow: this.$t('选择日期'),
			endTimeShow: '年/月/日',
			advanCheckList: [],
			filterList: {
				goods_type: "",//0大件 1小件
				search_time: '', // 发布时间
				start_time: '', //  开始时间
				end_time: '', // 结束时间
				departure_area: '', // 出发城市
				reach_area: '', // 到达城市
				keyword: '', // 货物类型
				demand: '', // 业务需求
				transport_way: '', // 运输方式
				min_weight: '', //最小重量
				max_weight: '', // 最大重量
				min_volume: '', // 最小体积
				max_volume: '', // 最大体积
			},
			rules: {},
			showSex: false,
			transportCheck: this.$t('请选择'),
			beginChecked: false,
			endChecked: false
		}
	},
	created() {
		this.getData();
		this.getDate()
	},
	computed: {
		addressList() {
			return [this.provinces, this.citys, this.areas];
		}
	},
	methods: {
		getDate(day) {
			const date = new Date();
			date.setDate(date.getDate() - day)
			const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
			return formattedDate
		},
		filterInit() {
			this.filterList.goods_type = ''
			this.filterList = {
				search_time: '', // 发布时间
				start_time: '', //  开始时间
				end_time: '', // 结束时间
				departure_area: '', // 出发城市
				reach_area: '', // 到达城市
				keyword: '', // 货物类型
				demand: '', // 业务需求
				transport_way: '', // 运输方式
				min_weight: '', //最小重量
				max_weight: '', // 最大重量
				min_volume: '', // 最小体积
				max_volume: '', // 最大体积
			}
			this.fullBeginAddress = ''
			this.fullEndAddress = ''
			this.fullBeginAddressKey = ''
			this.fullEndAddressKey = ''
			this.beginTimeShow = this.$t('选择日期')
			this.advantageList.forEach(item => {
				item.checked = false
			})
			this.transportCheck = this.$t('请选择')
			uni.$emit('getDeliveryList', this.filterList)
		},
		submit() {
			//大件清除 货物重量和体积
			if (this.tabIndex == 0 || this.tabIndex == -1) {
				this.filterList.min_weight = ''
				this.filterList.max_weight = ''
				this.filterList.min_volume = ''
				this.filterList.max_volume = ''
			}
			//小件清除 业务需求和运输方式
			if (this.tabIndex == 1 || this.tabIndex == -1) {
				this.advantageList.forEach(item => {
					item.checked = false
				})
				this.transportCheck = this.$t('请选择')
				this.filterList.demand = ''
				this.filterList.transport_way = ''
			}

			//不请求 只记录当前选择了什么 存到storage
			this.filterList.departure_area = this.fullBeginAddressKey
			this.filterList.reach_area = this.fullEndAddressKey
			// uni.setStorageSync("filterList", this.filterList)

			//把起点终点和时间传递给上层显示
			this.filterList.fullEndAddress = this.fullEndAddress
			this.filterList.fullBeginAddress = this.fullBeginAddress
			this.filterList.checkedTime = this.timeList.find(item => item.start_time == this.filterList.start_time && item.end_time == this.filterList.end_time)
			uni.$emit('getDeliveryList', this.filterList)
			console.log('8888888')
			// 返沪上一页
			// uni.navigateBack()
			this.$emit("update:modalIsShow", false)
			return
			// getDeliverySelect(
			// 	{...this.filterList, user_id:'1633',
			// 	departure_area: this.fullBeginAddress,
			// 	reach_area: this.fullEndAddress,
			// 	}
			// ).then(res => {
			// 	if (res.data.code == 200) {
			// 		if(res.data.data.data.length > 0) {
			// 			uni.navigateTo({
			// 				url:`/pages/sourceInformation/index?item=${JSON.stringify(res.data.data.data)}`
			// 			})
			// 		} else {
			// 			uni.$u.toast('暂无数据')
			// 		}

			// 	}
			// })
		},
		timestampToDate(timestamp) {
			// const date = new Date(timestamp); // 将时间戳转换为Date对象
			// const options = { year: 'numeric', month: 'long', day: 'numeric' }; // 定义日期格式
			// return new Intl.DateTimeFormat('zh-CN', options).format(date); // 使用Intl.DateTimeFormat进行格式化
			// return new Date(timestamp).toLocaleString()
			const date = new Date(timestamp);
			const utcYear = date.getUTCFullYear();
			const utcMonth = date.getUTCMonth() + 1; //月份是从0开始的，所以要加1
			const utcDay = date.getUTCDate();

			const result = utcYear + '-' + utcMonth + '-' + utcDay;
			return result
		},
		getData() {
			this.provinces = regionList.sort((left, right) => (Number(left.code) > Number(right.code) ? 1 : -1));
			// this.handlePickValueDefault()
			// uni.request({
			// 	method: 'GET',
			// 	url: '/gluz_freight/static/uvui/example/rsssgions.json',
			// 	success: res => {
			// 		const { statusCode, data } = res
			// 		if (statusCode === 200) {
			// 			console.log('获取的数据：', res);
			// 			this.provinces = data.sort((left, right) => (Number(left.code) > Number(right.code) ? 1 : -1));
			// 			console.log(this.provinces)
			// 			this.handlePickValueDefault()
			// 			setTimeout(() => {
			// 				this.loading = false
			// 			}, 200)
			// 		}
			// 	}
			// })
		},
		// 业务需求选择
		advanCheck(item, index) {
			for (const check in this.advantageList) {
				if (check == index) {
					this.advantageList[check].checked = !item.checked
					if (this.advanCheckList.indexOf(item.key) == -1) {
						this.advanCheckList.push(item.key)
					} else {
						this.advanCheckList = this.advanCheckList.filter(del => del !== item.key)
					}
				}
			}
			this.filterList.demand = this.advanCheckList.join(',')
		},
		// 发布时间选择
		timeCheck(item, index) {
			for (const check in this.timeList) {
				if (check == index) {
					this.timeList[check].checked = !item.checked
					this.timeCheckd = index
					this.filterList.search_time = index
					this.beginChecked = false
					this.endChecked = false
				}
			}
		},
		confirmTran(e) {
			this.filterList.transport_way = e.indexs[0]
			this.showTran = false
			console.log('-=-=-=-', e)
			this.transportCheck = e.value[0]
		},
		formatter(type, value) {
			if (type === 'year') {
				return `${value}/`
			}
			if (type === 'month') {
				return `${value}/`
			}
			if (type === 'day') {
				return `${value}/`
			}
			return value
		},
		// 开始时间选择
		async confirmBeginTime(e) {
			// 时间戳转年月日
			const timeFormat = uni.$u.timeFormat
			let timeValue = await timeFormat(e.value, 'yyyy-mm-dd')

			this.filterList.start_time = timeValue
			this.beginTimeShow = timeValue
			this.showBeginTime = false
			this.beginChecked = true
			this.timeCheckd = '5'
		},
		async confirmEndTime(e) {
			const timeFormat = uni.$u.timeFormat
			let timeValue = await timeFormat(e.value, 'yyyy-mm-dd')
			this.endTimeShow = timeValue
			this.filterList.end_time = timeValue
			this.showEndTime = false
			this.endChecked = true
			this.timeCheckd = '6'

		},
		handlePickValueDefault() {
			// 设置省
			this.pickerValue[0] = this.provinces.findIndex(item => Number(item.id) === this.defaultValue[0]);
			// 设置市
			this.citys = this.provinces[this.pickerValue[0]]?.children || [];
			this.pickerValue[1] = this.citys.findIndex(item => Number(item.id) === this.defaultValue[1]);
			// 设置区
			this.areas = this.citys[this.pickerValue[1]]?.children || [];
			this.pickerValue[2] = this.areas.findIndex(item => Number(item.id) === this.defaultValue[2]);
			// 重置下位置
			this.$refs.picker.setIndexs([this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]], true);
		},
		change(e) {
			if (this.loading) return;
			const {
				columnIndex,
				index,
				indexs,
				picker = this.$refs.picker
			} = e
			// 改变了省
			if (columnIndex === 0) {
				this.citys = this.provinces[index]?.children || []
				this.areas = this.citys[0]?.children || []
				picker.setIndexs([index, 0, 0], true)
			} else if (columnIndex === 1) {
				this.areas = this.citys[index]?.children || []
				picker.setIndexs(indexs, true)
			}
		},
		showPicker(index) {
			this.$refs.picker.open();
			//this.handlePickValueDefault()
			this.isStarEnd = index
		},
		confirm(e) {

			if (this.isStarEnd == 0) {
				this.startCity = `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`
			} else if (this.isStarEnd == 1) {
				this.endCity = `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`
			}
		},
		clickPubTime(index) {
			this.pubTimeIndex = index
			if (index == -1) {
				this.$refs.calendars.open();
			} else {
				this.afterTime = ''
				this.beforeTime = ''
			}
		},
		clickBusiness(index) {
			this.businessIndex = index
		},
		clickTabs(index) {
			this.filterList.goods_type = index
			this.tabIndex = index
		},
		confirmCalendars(e) {
			console.log(e.range)
			this.afterTime = e.range.after
			this.beforeTime = e.range.before
		}
	}
}
</script>

<style lang="scss">
// 新
page {
	height: 100%;
	background: #F6F7FB;
}

.empty {
	width: 100%;
	height: 200rpx;
}

.smallInputSty {
	width: 294rpx;
	height: 80rpx;
	flex-shrink: 0;
	border-radius: 500rpx;
	border: 2rpx solid #D8D8D8;
	// background: #F7F7F7;
	color: #333;
	font-family: "PingFang SC";
	font-size: 24rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 28rpx;

	/* 116.667% */
	/deep/ .uni-input-input,
	.uni-input-placeholder {
		text-align: center;
	}
}

.titleSty {
	color: #1D1D1D;
	font-family: "PingFang SC";
	font-size: 28rpx;
	font-style: normal;
	font-weight: 600;
	// margin-top: 40rpx;
}

.cityBox {
	// width: 96%;
	// height: 90rpx;
	display: flex;
	justify-content: space-evenly;
	align-items: stretch;

	.citySty {
		width: 274rpx;
		border-bottom: 2rpx solid #F0F0F0;
		// color: #0E0E0E;
		font-family: "PingFang SC";
		font-size: 36rpx;
		font-style: normal;
		display: flex;
		align-items: center;
		padding-bottom: 20rpx;
		// font-weight: 600;
	}

	image {
		width: 60rpx;
		height: 60rpx;
	}
}

.advanBoxSty {
	// width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-start;
	margin-top: 24rpx;
	margin-left: 12rpx;
	margin-right: 12rpx;

	.common {
		width: 150rpx;
		height: 64rpx;
		border-radius: 500rpx;
		background: #F7F7F7;
		color: #333;
		font-family: "PingFang SC";
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: center;
		margin-left: 20rpx;
		border: 1rpx solid transparent;
	}

	uni-button {
		margin-right: 0 !important;
	}

	/deep/ .u-form-item__body__right__content__slot {
		flex-wrap: wrap;
	}

	.common:first-child {
		margin-left: 0;
	}

	.common:nth-child(5) {
		margin-left: 0;
	}

	.common:nth-child(n+5):nth-child(-n+7) {
		margin-top: 16rpx;
	}

	.checkedSty {
		border: 1rpx solid #278AFF;
		background: #fff;
		color: #278AFF;
		font-weight: 600;
	}

	.timeBtnSty {
		// width: 294rpx;
		// height: 64rpx;
		margin-top: 16rpx;
		// margin-left: 20rpx;
		border: none;
		// border-radius: 500rpx;
		// background: #F7F7F7;
		color: #8C8C8C;
		font-family: "PingFang SC";
		font-size: 36rpx;
		font-style: normal;
		// font-weight: 400;
	}
}

.scoreNumSty {
	color: #FF7E17;
	margin-left: 60rpx;
	font-family: "PingFang SC";
	font-size: 60rpx;
	font-style: normal;
	font-weight: 600;
	margin-top: 10rpx;
}

.inputSty {
	border-radius: 18rpx;
	background-color: #fff;
	line-height: 95rpx;

	e-input {
		float: right;
	}

	/deep/ .uni-input-input {
		text-align: right;
		margin-right: 50rpx;
	}
}

/deep/ .u-form-item__body__left__content__label {
	color: #1D1D1D;
	font-family: "PingFang SC";
	font-size: 28rpx;
	font-style: normal;
	font-weight: 600;
}

uni-button:after {
	border: none;
}

.formSty {

	// padding-bottom: 200rpx;
	/deep/ .u-form-item__body {
		padding: 0;
	}
}

.contentBg {
	// background-color: #fff;
	// padding: 0 24rpx;
	margin-top: 24rpx;
	// border-radius: 26rpx;
	padding-bottom: 34rpx;
}

.topBg {
	background-color: #fff;
	padding: 0 16rpx;
	margin-top: 24rpx;
	border-radius: 18px;
}

.uploadSty {
	/deep/ .u-upload__button {
		border-radius: 16rpx;
	}
}

.textareaSty {
	height: 226rpx;
	border-radius: 18rpx;
	border: 2rpx solid #D8D8D8;
	// background: #F7F7F7;
	margin-top: 24rpx;
	text-indent: 18rpx;

	/deep/ .u-textarea__field {
		color: #333;
		font-size: 26rpx;
	}
}

.businessSty {
	height: 80rpx;
	border-radius: 18rpx;
	border: 2rpx solid #D8D8D8;
	margin-left: 24rpx;
	margin-right: 24rpx;
	// background: #F7F7F7;
	color: #333;
	font-family: "PingFang SC";
	font-style: normal;
	font-weight: 400;
	// margin-top: 24rpx;
	text-indent: 24rpx;

	/deep/ .u-input__content__field-wrapper__field {
		font-size: 26rpx !important;
	}
}

// .citySty {
// 	width: 100%;
// 	height: 80rpx;
// 	border-radius: 18rpx;
// 	border: 2rpx solid #D8D8D8;
// 	line-height: 80rpx;
// 	text-indent: 20rpx;
// 	display: flex;
// 	justify-content: space-between;
// }

.badBtn {
	height: 80rpx;
	border-radius: 18rpx;
	border: 2rpx solid #D8D8D8;
	// background: #F7F7F7;
	display: flex;
	justify-content: space-between;
	margin-left: 24rpx;
	margin-right: 24rpx;
	margin-bottom: 34rpx;
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 15rpx;
}

.footer_btn4 {
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	padding: 30rpx 24rpx 60rpx;

	.btn_blue {
		width: 98%;
		height: 94rpx;
		flex-shrink: 0;
		border-radius: 500px;
		border: 2rpx solid rgba(3, 189, 130, 0.10);
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color: #FFF;
		font-family: "PingFang SC";
		font-size: 32rpx;
		font-style: normal;
		font-weight: 600;
		text-align: center;
		line-height: 94rpx;
	}

	.btn_item {
		text-align: center;
		padding: 0 10rpx;

		.name {
			color: #8C8C8C;
			font-size: 20rpx;
			line-height: 22rpx;
		}
	}

	.ico {
		width: 42rpx;
		height: 42rpx;
	}
}

.info_jiesuan {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 18rpx;
	background: #F6F7FB;
	padding: 20rpx 24rpx;
	color: #333;
	font-size: 26rpx;
	line-height: 40rpx;
	overflow: hidden;

	.jian {
		color: #FE3E3B;
	}
}

.disp_title {
	color: #1D1D1D;
	font-size: 28rpx;
	font-weight: 600;
	line-height: 28rpx;
	padding: 24rpx 35rpx 10rpx;
}

.bor_bgff {
	margin: 20rpx 24rpx;
	background: #fff;
	border-radius: 20rpx;
}

.disp_info {
	padding: 0 24rpx 30rpx;

	.title {
		color: #1D1D1D;
		font-size: 28rpx;
		font-weight: 600;
		line-height: 28rpx;
		padding: 34rpx 0 24rpx;
	}

	.info_text {
		border-radius: 18rpx;
		background: #F6F7FB;
		padding: 20rpx 24rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 40rpx;
		overflow: hidden;
	}
}

.item_photo {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	align-content: flex-start;
	flex-wrap: wrap;
	gap: 18rpx;
	padding: 20rpx 0;

	.ph {
		display: block;
		width: 150rpx;
		height: 150rpx;
		flex-shrink: 0;
		border-radius: 15rpx;
	}
}

.guanl_order {
	margin: 20rpx 24rpx;
	height: 96rpx;
	background: #fff;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16rpx 0 24rpx;

	.name {
		font-size: 28rpx;
		line-height: 40rpx;
		font-weight: 600;
	}

	.info {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: 600;

	}
}

// 旧
.info_input {
	font-size: 26rpx;
	line-height: 22px;
}

.transport {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80rpx;
	border-radius: 20rpx;
	background: #F6F7FB;
	padding: 0 20rpx 0 20rpx;

	.transport_name {
		color: #333;
		font-size: 26rpx;
		line-height: 30px;
	}
}

.publish_time_calendars {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16rpx;

	.line {
		width: 42rpx;
		height: 1rpx;
		background: #D8D8D8;
	}

	.item {
		width: 294rpx;
		height: 64rpx;
		flex-shrink: 0;
		border-radius: 50rpx;
		background: #F6F7FB;
		color: #333;
		font-size: 24rpx;
		line-height: 64rpx;
		text-align: center;
	}
}

.publish_time {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;
	gap: 15rpx;

	.publish_time_item {
		width: 150rpx;
		height: 64rpx;
		flex-shrink: 0;
		border-radius: 50rpx;
		background: #F6F7FB;
		color: #333;
		font-size: 24rpx;
		line-height: 64rpx;
		text-align: center;

		&.hover {
			border: 1rpx solid #278AFF;
			background: #D7E9FF;
			color: #278AFF;
		}
	}
}

.bor_bgff {
	margin: 20rpx 24rpx;
	background: #fff;
	border-radius: 20rpx;
}

.screen {
	padding: 0 24rpx 30rpx;

	.title {
		color: #1D1D1D;
		font-size: 28rpx;
		font-weight: 600;
		line-height: 28rpx;
		padding: 34rpx 0 24rpx;
	}

	.info_text {
		border-radius: 18rpx;
		background: #F6F7FB;
		padding: 20rpx 24rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 40rpx;
		overflow: hidden;
	}
}

.tabs_nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 86rpx;
	background: #fff;

	.item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		// &:last-child{
		// 	border-left:1px solid #eee;
		// }
		.name {
			color: #333;
			font-size: 28rpx;
			line-height: 32rpx;
			padding-left: 6rpx;
		}

		&.hover {
			&::after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: -16rpx;
				width: 80rpx;
				height: 6rpx;
				flex-shrink: 0;
				border-radius: 30rpx;
				background: #278AFF;
				margin-left: -40rpx;
			}

			.name {
				color: #278AFF;
			}
		}
	}
}

.timeActive {
	color: #278AFF !important;
	background-color: #D7E9FF;
	border: 1rpx solid #278AFF;
}
</style>